<template>
    <uni-card class="m-category-product-list">
        <m-ticky-tab-panel
            :tabs="categorys"
            @tabChange="tabChange"
            :tabWidth="tabWidth"
            ref="stickPannel"
        ></m-ticky-tab-panel>
        <m-page-water-fall ref="mPageWaterFall" :listFn="listFn">
            <template v-slot:header="{ data: product }">
                <image class="m-product-img" :src="product.imageUrl" mode="scaleToFill" />
            </template>
            <template v-slot:body="{ data: product }">
                <view class="m-product-content-title">{{ product.title }}</view>
                <view class="m-product-content-sub-title">{{ product.subTitle }}</view>
                <view class="m-product-content-tags">
                    <uni-tag
                        v-for="item in product.tags"
                        :inverted="true"
                        :text="item"
                        type="success"
                        size="small"
                        custom-style=" margin: 8rpx 4rpx;
    word-break: keep-all;"
                    />
                </view>
            </template>
            <template v-slot:footer="{ data: product }">
                <text class="m-product-content-price-icon">￥</text>
                <text class="m-product-content-price">{{ product.price }}</text>
            </template>
        </m-page-water-fall>
    </uni-card>
</template>

<script lang="ts" setup>
import MTickyTabPanel from '@/components/common/MTickyTabPanel.vue'
import MPageWaterFall from '@/components/common/MPageWaterFall.vue'
import { ref, onMounted } from 'vue'
import { getProductList } from '@/api/product'
const props = defineProps({
    categorys: { type: Array<Category>, default: [] },
    scrollTop: Number
})
let categoryId = 1
const mPageWaterFall = ref<InstanceType<typeof MPageWaterFall> | null>(null)
function tabChange(index: number) {
    categoryId = props.categorys[index].id
    mPageWaterFall.value?.reset()
}
onMounted(() => {
    mPageWaterFall.value?.reset()
})
const tabWidth = ref(0)
uni.getSystemInfo({
    success: (res) => {
        tabWidth.value = res.windowWidth - 10
    }
})
function listFn(query: any) {
    query.categoryId = categoryId
    return getProductList(query)
}
const stickPannel = ref<InstanceType<typeof MTickyTabPanel> | null>(null)
function stick(pos: number) {
    if (stickPannel.value) {
        stickPannel.value.stick(pos)
    }
}
defineExpose({
    stick
})
</script>

<style lang="scss" scoped>
@import '~@/static/css/m-product.scss';
.m-category-product-list {
    margin-bottom: 0rpx !important;
    background-color: unset !important;
    padding: 0rpx !important;
}
</style>
